<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '景点详情',
  },
}
</route>
<template>
  <view class="bg-#fff overflow-auto w-100% h-screen box-border">
    <view class="tab_cont2" @click="handleClickLeft">
      <wd-icon name="thin-arrow-left" size="18" color="#6B6B6B" />
    </view>
    <view style="position: relative">
      <view class="swiper-container">
        <swiper indicator-dots circular autoplay>
          <swiper-item v-for="item in list.fileDOList" :key="item">
            <image class="w-100% h-446rpx" :src="item.url"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="bg-#fff w-100% p-20rpx box-border detail-card">
        <view class="title mb-20rpx px-20rpx">{{ list.scenicName }}</view>
        <view class="px-20rpx flex mb-16rpx" style="flex-wrap: wrap">
          <view class="mr-14rpx mb-14rpx" v-for="item in list.scenicLabel" :key="item">
            <wd-tag
              style="min-width: 40rpx; font-size: 24rpx; text-align: center"
              color="#AD0E0E"
              bg-color="#AD0E0E"
              plain
            >
              {{ item }}
            </wd-tag>
          </view>
        </view>
        <view class="message-card">
          <view class="flex items-center justify-between mb-20rpx">
            <view class="flex">
              <wd-icon name="location" size="24px" color="#B9B9B9"></wd-icon>
              <view class="card-title mb-10rpx">
                {{ list.scenicAddr }}
              </view>
            </view>
            <view @click="handleAddr">
              <image
                class="w-80rpx h-80rpx"
                src="../../../static/images/TouristCenter/position.png"
              ></image>
            </view>
          </view>
          <view class="flex mb-30rpx">
            <wd-icon name="time" size="24px" color="#B9B9B9"></wd-icon>
            <view class="card-title">{{ list.openTime }}</view>
          </view>
          <view class="flex mb-14rpx">
            <wd-icon name="money-circle" size="24px" color="#B9B9B9"></wd-icon>
            <view class="card-title">
              <span class="per-capita mr-4rpx">人均</span>
              <span class="per-money mr-4rpx">¥{{ list.consumption }}</span>
            </view>
          </view>
          <view class="flex items-center justify-between">
            <view class="flex">
              <wd-icon name="call" size="24px" color="#B9B9B9"></wd-icon>
              <view class="card-title">{{ list.phone }}</view>
            </view>
            <view @click="handlePhone">
              <image
                class="w-60rpx h-60rpx p-10rpx"
                src="../../../static/images/TouristCenter/phone.png"
              ></image>
            </view>
          </view>
        </view>
        <view class="mt-30rpx">
          <view class="detail-title">景区简介：</view>
          <view class="detail-content">
            {{ list.introduction }}
          </view>
        </view>
        <view class="mb-100rpx">
          <view class="detail-title">旅游攻略：</view>
          <view class="detail-content" v-if="list.travelGuide">
            {{ list.travelGuide }}
          </view>
          <view class="detail-content" v-else>暂无</view>
        </view>
      </view>
    </view>
    <view class="footer_cont" @click="handlePhone">
      <view class="footer">立即联系</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../../service/TouristCenter/index'
import { useToast, useMessage } from 'wot-design-uni'
const toast = useToast()
const handlePhone = () => {
  uni.makePhoneCall({
    phoneNumber: list.value.phone,
  })
}
function handleClickLeft() {
  uni.navigateBack()
}
const longitude = ref(110.015116) // 经度
const latitude = ref(36.553211) // 纬度
const mylongitude = ref(0) // 经度
const mylatitude = ref(0) // 纬度
const name = ref('延安市延长县董家芽原村')
const handleAddr = () => {
  let url = '' // 在这里定义 url 变量
  uni.showActionSheet({
    title: '请选择系统中已安装的地图应用导航',
    itemList: ['腾讯地图', '百度地图', '高德地图', '无以上地图，复制地址'],
    success: function (res) {
      switch (res.tapIndex) {
        case 0:
          url = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${mylatitude.value},${mylongitude.value}&to=${name.value}&tocoord=${latitude.value},${longitude.value}`
          break
        case 1:
          url = `https://api.map.baidu.com/marker?location=${latitude.value},${longitude.value}&title=${name.value}&output=html&src=webapp.baidu.openAPIdemo`
          break
        case 2:
          url = `https://uri.amap.com/marker?position=${longitude.value},${latitude.value}&name=${name.value}`
          break
        case 3:
          // 复制
          uni.setClipboardData({
            data: list.value.scenicAddr + '', //	接受字符串类型 value转化为字符串
            success: () => {
              uni.hideToast()
              toast.success('复制成功，可到地图应用中查找前往')
            },
          })
          break
      }
      if (url) {
        window.location.href = encodeURI(url)
      }
    },
    fail: function (res) {
      console.log(res.errMsg)
    },
  })
  uni.getLocation({
    type: 'wgs84',
    success: function (res) {
      mylatitude.value = res.latitude
      mylongitude.value = res.longitude
    },
  })
  uni.setClipboardData({
    data: list.value.scenicAddr + '',
    success: () => {
      uni.hideToast()
    },
  })
}
const list = ref([])
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
onLoad(async (options) => {
  // 获得特色景点详情
  const data: any = await getApi.getScenicspotdetail(Number(options.id))
  list.value = data.data
  if (list.value.latAndLon) {
    const [lng, lat] = list.value.latAndLon.split(',')
    longitude.value = parseFloat(lng) // 将字符串转换为浮点数
    latitude.value = parseFloat(lat) // 同上
    name.value = list.value.scenicAddr // 同上
  }
  list.value.scenicLabel = list.value.scenicLabel.split(',')
  list.value.fileDOList = list.value.fileDOList.reverse().map((item) => {
    item.url = `${baseurl.value}${item.url}`
    return item
  })
})
</script>
<style scoped>
::v-deep .wd-tag__text {
  display: block !important;
  min-height: 17px;
  padding-top: 6rpx !important;
  padding-bottom: 6rpx !important;
  line-height: 17px;
}
::v-deep .wd-tag {
  display: block !important;
}
.title {
  font-size: 48rpx;
  font-weight: 500;
  color: rgb(59, 59, 59);
  text-align: justify;
}
.swiper-container {
  width: 100%;
  height: 446rpx;
}
::v-deep .uni-swiper-dots-horizontal {
  bottom: 30px !important;
}
.message-card {
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(178, 178, 178, 0.4);
}
.detail-title {
  padding: 0 20rpx;
  font-size: 36rpx;
  color: rgba(16, 16, 16, 1);
  text-align: left;
}
.detail-content {
  padding: 20rpx;
  font-size: 26rpx;
  line-height: 44rpx;
  color: rgba(16, 16, 16, 1);
  text-align: justify;
  text-indent: 2em;
}
.detail-card {
  position: absolute;
  top: 400rpx;
  width: 100%;
  margin: 0 !important;
  border-radius: 16px 16px 0px 0px;
}
.card-title {
  margin-left: 12rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: rgb(21, 21, 21);
  text-align: left;
}
.per-money {
  font-size: 30rpx;
  font-weight: 500;
  color: rgba(215, 8, 8, 1);
  text-align: left;
}
.per-capita {
  font-size: 30rpx;
  font-weight: 500;
  color: #101010;
  text-align: left;
}
.footer_cont {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0px -3px 6px 0px rgba(201, 201, 201, 0.4);
}
.footer {
  width: 96%;
  height: 80rpx;
  margin: 2%;
  font-size: 32rpx;
  line-height: 80rpx;
  color: #fff;
  text-align: center;
  background-color: #47a527;
  border-radius: 100rpx;
}
.tab_cont2 {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  z-index: 999;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.57);
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50px;
}
</style>
